<template>
  <div class="screening-container">
    <div
      v-if="d.activeIndex === 100 && isEmrViewRx && type === 'screening'"
      class="risk-header"
    >
      <span>风险筛查：</span>
      <el-button type="text" @click="clickRisk">
        {{ d.riskMedicalDiagnosis }}
      </el-button>
    </div>
    <page-header
      v-if="d.activeIndex === 100"
      :type="type"
      @reset="backTable"
      @searchChange="searchChange"
      @add="add"
    />
    <div style="padding: 0px 50px; margin-top: -10px; margin-bottom: 12px">
      <el-alert
        v-if="d.title && d.activeIndex === 100"
        :title="d.title"
        type="success"
        center
        show-icon
      ></el-alert>
    </div>
    <pagination-table
      v-if="d.activeIndex === 100"
      ref="ptable"
      :tableData="d.listData"
      @pagination="searchChange"
    >
      <XMTableColumn label="时间" prop="createTime"></XMTableColumn>
      <XMTableColumn label="类型" prop="screeningTypeName"></XMTableColumn>
      <XMTableColumn label="结论" prop="result"></XMTableColumn>
      <XMTableColumn label="评估年龄" prop="age" min-width="60"></XMTableColumn>
      <XMTableColumn label="筛查人" prop="createby"></XMTableColumn>
      <XMTableColumn label="操作" min-width="40">
        <template #default="scope">
          <el-button size="small" type="primary" @click="edit(scope.row)">
            查看
          </el-button>
        </template>
      </XMTableColumn>
    </pagination-table>
    <node-table
      title="请选择"
      label="名称"
      :list="d.dataList"
      v-model="d.isShowNode"
      @nodeChage="selectClick"
    ></node-table>
    <div v-if="d.activeIndex === 3 || d.activeIndex === 4">
      <el-button type="text" icon="el-icon-arrow-left" @click="backTable">
        返回列表
      </el-button>
      <asthma-and-allergic-form
        v-if="d.showType === 'asthma'"
        :id="d.id"
        :pid="pid"
        @success="backTable"
      ></asthma-and-allergic-form>
      <outside-asthma-and-allergic-form
        v-if="d.showType === 'outsideAsthma'"
        :id="d.id"
        :pid="pid"
        @success="backTable"
      ></outside-asthma-and-allergic-form>
    </div>
    <div v-if="d.activeIndex === 0">
      <el-button type="text" icon="el-icon-arrow-left" @click="backTable">
        返回列表
      </el-button>
      <asthma-questionnaire-form-ACT
        :id="d.id"
        :pid="pid"
        v-if="d.showType === 'ACT'"
        @success="backTable"
      ></asthma-questionnaire-form-ACT>
      <asthma-questionnaire-form-CACT
        :id="d.id"
        :pid="pid"
        v-if="d.showType === 'C-ACT'"
        @success="backTable"
      ></asthma-questionnaire-form-CACT>
      <asthma-questionnaire-form-TRACT
        :id="d.id"
        :pid="pid"
        v-if="d.showType === 'TRACK'"
        @success="backTable"
      ></asthma-questionnaire-form-TRACT>
    </div>
    <div v-if="d.activeIndex === 1">
      <el-button type="text" icon="el-icon-arrow-left" @click="backTable">
        返回列表
      </el-button>
      <control-level-form
        :id="d.id"
        :pid="pid"
        :showType="d.showType"
        @success="backTable"
      ></control-level-form>
    </div>
    <div v-if="d.activeIndex === 2">
      <el-button type="text" icon="el-icon-arrow-left" @click="backTable">
        返回列表
      </el-button>
      <bronchial-asthma-form
        :id="d.id"
        :pid="pid"
        v-if="d.showType === 'lessThan'"
        :showType="d.showType"
        @success="backTable"
      ></bronchial-asthma-form>
      <bronchial-asthma-form-SA
        :id="d.id"
        :pid="pid"
        v-if="d.showType === 'greaterEqual'"
        :showType="d.showType"
        @success="backTable"
      ></bronchial-asthma-form-SA>
    </div>
  </div>
</template>
<script>
  import { reactive, onBeforeMount, toRefs, nextTick } from 'vue'
  // import { on}
  import PageHeader from '@/components/PageHeader'
  import PaginationTable from '@/components/PaginationTable'
  import asthmaAndAllergicForm from './form/asthmaAndAllergicForm.vue'
  // eslint-disable-next-line max-len
  import outsideAsthmaAndAllergicForm from './form/outsideAsthmaAndAllergicForm.vue'
  import controlLevelForm from './form/controlLevelForm.vue'
  import bronchialAsthmaForm from './form/bronchialAsthmaForm.vue'
  import bronchialAsthmaFormSA from './form/bronchialAsthmaFormSA.vue'
  import NodeTable from '@/components/NodeTable'
  // eslint-disable-next-line max-len
  import asthmaQuestionnaireFormTRACT from './form/asthmaQuestionnaireFormTRACT.vue'
  import asthmaQuestionnaireFormACT from './form/asthmaQuestionnaireFormACT.vue'
  // eslint-disable-next-line max-len
  import asthmaQuestionnaireFormCACT from './form/asthmaQuestionnaireFormCACT.vue'
  import list from '@/hooks/list'
  import { queryPage } from '@/api/modules/reception'
  import { useStore } from 'vuex'
  import { useRoute, useRouter } from 'vue-router'
  import { seachRiskInfo } from '@/api/modules/reception.js'
  import { usePromise } from '@/hooks/core/usePromise.js'
  import { useRouters } from '@/hooks/core/useRouters.ts'
  import { useRouteAndRouter } from '@/hooks/core/useRouteAndRouter.js'
  import common from '../../../utils/common'
  export default {
    name: 'screening',
    // Screening 筛查 Assessment 评估
    props: { id: Number, pid: Number, type: String },
    components: {
      PageHeader,
      PaginationTable,
      asthmaAndAllergicForm,
      outsideAsthmaAndAllergicForm,
      controlLevelForm,
      bronchialAsthmaForm,
      bronchialAsthmaFormSA,
      NodeTable,
      asthmaQuestionnaireFormCACT,
      asthmaQuestionnaireFormTRACT,
      asthmaQuestionnaireFormACT,
    },
    setup(props) {
      const { loadData, getSearch, format } = list()
      const { type, pid } = toRefs(props)
      const { isEmrViewRx } = useRouteAndRouter()
      const d = reactive({
        historicalVisitRiskId: null,
        riskMedicalDiagnosis: null,
        riskMedicalRecordId: null,
        listData: {},
        search: getSearch({
          screeningType: type.value === 'screening' ? '3,4' : '1,2',
        }),
        isShowNode: false,
        dataList: [],
        showType: null,
        id: null,
        activeIndex: 100,
        title: null,
      })
      onBeforeMount(() => {
        toLoad(d.search)
        if (isEmrViewRx.value) {
          getRiskMsg()
        }
      })

      const { to } = usePromise()
      // 获取风险
      async function getRiskMsg() {
        const [err, res] = await to(seachRiskInfo({ patientId: pid.value }))
        if (err) return
        const {
          riskMedicalDiagnosis,
          riskMedicalRecordId,
          historicalVisitRiskId,
        } = res.data
        // 风险筛查
        d.riskMedicalDiagnosis = riskMedicalDiagnosis
          ? riskMedicalDiagnosis
          : '未筛查'
        d.riskMedicalRecordId = riskMedicalRecordId
        d.historicalVisitRiskId = historicalVisitRiskId
      }
      const toLoad = function (search) {
        loadData(queryPage, { ...search, patientId: props.pid }).then((res) => {
          d.listData = res
          d.title = res.message
        })
      }
      const add = function () {
        if (type.value === 'screening') {
          d.dataList = [
            { orgName: '儿童哮喘与过敏性疾病筛查表(初筛)', index: 3 },
            { orgName: '儿童哮喘与过敏性疾病筛查表(院内初筛)', index: 4 },
          ]
        } else {
          d.dataList = [
            { orgName: '控制水平评估', index: 1 },
            { orgName: '支气管哮喘急性发作严重度评估表', index: 2 },
          ]
        }
        d.isShowNode = true
      }

      // 搜查参数
      const searchChange = function (params) {
        format(d.search, params, [null, null, 'screeningType'])
        toLoad(d.search)
      }

      // 弹窗选择不同的表单
      const store = useStore()
      const selectClick = function (val) {
        d.isShowNode = false
        d.activeIndex = val.index
        if (val.index === 0) {
          d.showType = store.getters.patientInfo.childType
        } else if (val.index === 1 || val.index === 2) {
          d.showType = store.getters.patientInfo.ageType
        } else if (val.index === 3 || val.index === 4) {
          d.showType = val.index === 3 ? 'asthma' : 'outsideAsthma'
        } else if (val.index === 5) {
          console.log('跳转去风险筛查 等后端返回数据')
        }
      }

      // const { go } = useRouters()
      // TODO 为什么这里用go要点两次

      const router = useRouter()
      async function clickRisk() {
        if (!d.historicalVisitRiskId) return
        const query = {
          id: props.pid,
          vid: d.historicalVisitRiskId,
          vtype: 0,
          skipEmrPermissionGuard: true,
        }
        if (d.riskMedicalRecordId) query['emrId'] = d.riskMedicalRecordId
        // 已经提交过的 点击直接跳转过去
        if (d.riskMedicalRecordId) {
          await nextTick()
          router.push({ name: 'riskWithMedicalRecord', query })
          return
        }
        // 未经提交过的 窗口询问
        await common.syncAlert('是否前往风险筛查页面')
        await nextTick()
        router.push({ name: 'riskWithMedicalRecord', query })
      }
      // 修改表单
      const edit = function (val) {
        d.id = val.id
        d.activeIndex = val.screeningType
        if (val.screeningType === 3 || val.screeningType === 4) {
          d.showType = val.screeningType === 3 ? 'asthma' : 'outsideAsthma'
        } else {
          d.showType = val.childType
        }
      }

      // 从表单里返回
      const route = useRoute()
      const backTable = function () {
        d.isShowNode = false
        d.showType = null
        d.activeIndex = 100
        d.id = null
        d.search = getSearch({
          screeningType: type.value === 'screening' ? '3,4' : '1,2',
        })
        toLoad(d.search)
        store.dispatch('patient/loadEmrStatus', {
          medicalRecordId: route.query.emrId,
          patientId: route.query.id,
        })
      }

      return {
        d,
        add,
        selectClick,
        edit,
        backTable,
        searchChange,
        clickRisk,
        isEmrViewRx,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .screening-container {
    .risk-header {
      font-size: 16px;
      display: flex;
      align-items: center;
    }
    .el-descriptions__header {
      height: 40px;
      margin-bottom: 0px;
    }
    .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
  }
</style>
